<template>
	<a-card :bordered="false" :loading="props.loading">
		<a-input-search
			v-if="props.data.length > 0"
			v-model:value="searchValue"
			style="margin-bottom: 8px"
			clear
			:placeholder="props.placeholder"
			@search="treeSearch"
		/>
		<a-tree
			v-if="props.data.length > 0"
			v-model:expandedKeys="ExpandedKeys"
			:tree-data="props.data"
			:field-names="props.fieldNames"
			:auto-expand-parent="autoExpandParent"
			@select="treeSelect"
		>
			<template #title="node">
				<span v-if="node[props.fieldNames['title']].indexOf(searchValue) > -1">
					{{ node[props.fieldNames['title']].substr(0, node[props.fieldNames['title']].indexOf(searchValue)) }}
					<span style="color: var(--primary-color)">{{ searchValue }}</span>
					{{
						node[props.fieldNames['title']].substr(
							node[props.fieldNames['title']].indexOf(searchValue) + searchValue.length
						)
					}}
				</span>
				<span v-else>{{ node[props.fieldNames['title']] }}</span>
			</template>
		</a-tree>
		<a-empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" />
	</a-card>
</template>

<script setup name="STree">
	import { message, Empty } from 'ant-design-vue'
	import { ref, watch } from 'vue'
	import { onMounted } from 'vue'
	const emit = defineEmits({ select: null })
	const props = defineProps({
		placeholder: { type: String, default: () => '', required: false },
		data: {
			type: Object,
			required: true
		},
		fieldNames: {
			type: Object,
			default: () => Object,
			required: true
		},
		expandedKeys: { type: Array, default: () => Array, required: false },
		loading: { type: Boolean, required: false }
	})
	const dataList = []
	const autoExpandParent = ref(true)
	const searchValue = ref('')
	// 默认展开的节点
	const ExpandedKeys = ref([])

	onMounted(() => {
		ExpandedKeys.value = props.expandedKeys
	})
	// 转化数据源-搜索
	const generateList = (data) => {
		for (let i = 0; i < data.length; i++) {
			const node = data[i]
			const key = node[props.fieldNames['key']]
			const title = node[props.fieldNames['title']]
			dataList.push({
				key,
				title: title
			})
			if (node[props.fieldNames['children']]) {
				generateList(node[props.fieldNames['children']])
			}
		}
	}
	watch(searchValue, (value) => {
		treeSearch(value)
	})

	const treeSearch = (value) => {
		generateList(props.data)
		const expanded = dataList
			.map((item) => {
				if (item.title.indexOf(value) > -1) {
					return getParentKey(item.key, props.data)
				}
				return null
			})
			.filter((item, i, self) => item && self.indexOf(item) === i)
		ExpandedKeys.value = expanded
		searchValue.value = value
		autoExpandParent.value = true
	}
	const getParentKey = (key, tree) => {
		let parentKey
		for (let i = 0; i < tree.length; i++) {
			const node = tree[i]
			const children = node[props.fieldNames['children']]
			if (children) {
				if (children.some((item) => item[props.fieldNames['key']] === key)) {
					parentKey = node[props.fieldNames['key']]
				} else if (getParentKey(key, children)) {
					parentKey = getParentKey(key, children)
				}
			}
		}
		return parentKey
	}

	const treeSelect = (selectedKeys) => {
		// 触发change事件
		emit('select', selectedKeys)
	}

	defineExpose({
		// treeSearch
	})
</script>
<style scoped>
	.cardImp {
		margin-right: 10px;
	}

	.ant-form-item {
		margin-bottom: 0 !important;
	}

	.primaryAdd {
		margin-right: 10px;
	}

	.buttom-left {
		margin-left: 8px;
	}
</style>
